<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';


const index = ref('');
const title = ref('');


const dataList = [
  {
    id: 1,
    title: "iPhone 15系列发布首日：有500元",
    description: "这个是课程的简介，介绍课程的基本信息",
    students: 107,
    date: "2024-02-28 17:24",
    type: 0
  },
  {
    id: 2,
    title: "华为新一代麒麟芯片发布：革新手机处理器",
    description: "详细介绍了华为新款麒麟芯片的技术特点和应用场景。",
    students: 89,
    date: "2024-03-15 09:45",
    type: 1
  },
  {
    id: 3,
    title: "三星折叠手机全新推出：折叠屏技术再进一步",
    description: "展示了三星最新款折叠手机的设计革新和技术突破。",
    students: 120,
    date: "2024-04-02 14:18",
    type: 2
  },
  {
    id: 4,
    title: "小米首款自主研发芯片发布：重塑智能硬件未来",
    description: "解析了小米自主研发芯片的技术背景和市场前景。",
    students: 95,
    date: "2024-04-21 11:30",
    type: 2
  },
  {
    id: 5,
    title: "OPPO新一代超级快充技术亮相：充电时间再次缩短",
    description: "介绍了OPPO最新推出的超级快充技术，带来了充电新体验。",
    students: 150,
    date: "2024-05-07 19:02",
    type: 2
  },
  {
    id: 6,
    title: "索尼新一代游戏主机发布：提升游戏体验到新高度",
    description: "详细分析了索尼最新款游戏主机的硬件规格和游戏功能。",
    students: 80,
    date: "2024-05-18 10:15",
    type: 1
  },
  {
    id: 7,
    title: "谷歌量子计算机研究取得重大突破：加速量子计算时代到来",
    description: "介绍了谷歌在量子计算领域的最新研究成果和未来发展方向。",
    students: 200,
    date: "2024-06-01 15:55",
    type: 0
  },
  {
    id: 8,
    title: "AMD新一代处理器发布：挑战性能极限",
    description: "探讨了AMD最新一代处理器在性能和功耗方面的平衡与创新。",
    students: 180,
    date: "2024-06-10 08:40",
    type: 2
  },
  {
    id: 9,
    title: "IntelliJ IDEA 2024版发布：提升开发者工作效率",
    description: "介绍了IntelliJ IDEA 2024版的新功能和开发工具集成优化。",
    students: 160,
    date: "2024-06-15 13:20",
    type: 1
  },
  {
    id: 10,
    title: "Python编程语言最新版本发布：增强AI和数据科学能力",
    description: "解析了Python最新版本的新增功能和改进，特别是在人工智能和数据科学领域的应用。",
    students: 220,
    date: "2024-06-20 16:45",
    type: 2
  }
];


onLoad((optision) => {
  console.log(optision);
  index.value = optision.index;
  title.value = optision.title;
})

const leftClick = () => {
  uni.navigateBack();
}

const goDetail = (item) => {
  const type = item.type;
  switch (type) {
    case 0:
      uni.navigateTo({
        url: '/pages/index/components/book-news?id=' + item.id + '&title=' + item.title
      })
      break;
    case 1:
      uni.navigateTo({
        url: '/pages/index/components/Audio-player?id=' + item.id
      })
    default:
      break;
  }
}

</script>

<template>
  <fui-nav-bar :title="title" @leftClick="leftClick" :isFixed="true" :isOccupy="true">
    <fui-icon name="arrowleft" :size="48"></fui-icon>
  </fui-nav-bar>
  <view class="latest-today">
    <view class="sreach-box">
      <fui-icon name="search" :size="30" color="#999999"></fui-icon>
      <text>请输入需要搜索的课程</text>
    </view>
    <view class="list-box" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
      <view class="image-box">
        <image class="list-box-image" src="https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg" />
        <view class="overlay-content">
          {{ item.type === 0 ? '新闻' : item.type === 1 ? '音频' : item.type === 2 ? '视频' : '未知' }}
        </view>
      </view>
      <div class="list-box-content">
        <view class="box-content-top">{{ item.title }}</view>
        <view class="box-content-two">{{ item.description }}</view>
        <view class="box-content-three">
          <view class="content-three-one">{{ item.students }} 人已学习</view>
          <view class="content-three-two">{{ item.date }}</view>
        </view>
      </div>
    </view>
  </view>
</template>

<style scoped lang="scss">
.latest-today {
  padding: 20rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .sreach-box {
    width: 670rpx;
    height: 84rpx;
    background-color: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    text {
      width: 80%;
      font-size: 28rpx;
      color: #999999;
    }
  }

  .list-box {
    margin: 20rpx;
    width: 670rpx;
    height: 160rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .image-box {
      width: 216.66rpx;
      height: 160rpx;
      position: relative;

      .list-box-image {
        width: 216.66rpx;
        height: 160rpx;
        border-radius: 16rpx;
      }

      .overlay-content {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        width: 56.88rpx;
        height: 32rpx;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18rpx;
        color: #FFF;
        border-radius: 8rpx;
      }
    }

    .list-box-content {
      width: 433.34rpx;
      height: 160rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .box-content-top {
        width: 100%;
        height: 40rpx;
        overflow: hidden;
        font-size: 28rpx;
        color: #424242;
        text-align: center;
      }

      .box-content-two {
        width: 100%;
        height: 34rpx;
        font-size: 24rpx;
        color: #999999;
        overflow: hidden;
      }

      .box-content-three {
        width: 100%;
        height: 34rpx;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #999999;

        .content-three-one {
          width: 162rpx;
          height: 100%;
          text-align: center;
        }

        .content-three-two {
          width: 220rpx;
          height: 100%;
          text-align: center;
        }
      }
    }
  }
}
</style>